﻿<template>
    <my-dialog v-model="state.dlgVisible" :title="cfg.title" :width="cfg.width">
        <el-form ref="elForm" :model="formData" :rules="tb.rules" :label-width="cfg.label_width"
            :label-position="cfg.label_position" :disabled="state.readonly">
            <template v-for="item in cfg.items" :key="item">
                <my-form-row :tb="tb" :row="item" :formData="formData" :computeData="computeData"></my-form-row>
            </template>
        </el-form>

        <template #footer v-if="cfg.actions && cfg.actions.length > 0">
            <template v-for="btn in cfg.actions">
                <el-button :key="btn.label" :type="btn.type" v-if="checkIf(btn.vif)" @click="doClick(btn.click)">{{
                        btn.label
                }}</el-button>
            </template>
        </template>
    </my-dialog>
</template>

<script>
import { Utils, Server } from "./main";


export default {
    name: "MySimpleFormDlg",
    data() {
        return {
            tb:{},
            cfg: {},
            state: {
                dlgVisible: false,
                readonly: false,
            },
            formData: {
                ID: 0,
            },
            rules: {},
            //动态增加的计算字段
            computeData: {},
        };
    },
    methods: {
        view(form, formData) {
            return this.open(form, formData).then(()=>{
                this.state.readonly = true;
            });
        },

        open(form, formData) {
            let tb = { columns: form.columns, form: form, rules: form.rules || {}};
            delete tb.form.columns;
            delete tb.form.rules;

            let cfg = Server.prepareDM(tb);
            return Promise.resolve(cfg).then(tb1 => {
                this.tb = tb1;
                this.cfg = tb1.form;
                this.formData = formData;

                this.proceformExtend();
                this.state.dlgVisible = true;
            });
        },

        close() {
            this.state.dlgVisible = false;
        },

        checkIf(vif) {
            if (typeof vif == "function") {
                return vif.apply(this);
            } else if (typeof vif == "string") {
                return this.computeData[vif] != false;
            }
            return true;
        },
        doClick(func) {
            Utils.doFunc(func, this);
        },
        proceformExtend() {
            if (this.cfg.vue) {
                //动态添加watch
                this.proceFormWatch(this.cfg.vue.watch);
                //动态添加计算属性
                this.proceFormComputed(this.cfg.vue.computed);
                //添加动态method
                this.proceFormMethods(this.cfg.vue.methods);
            }
        },
        proceFormWatch(w) {
            for (let key in w) {
                let val = w[key];
                if (typeof val == "function") {
                    this.$watch(key, (newVal, oldVal) => {
                        try {
                            val.apply(this, [newVal, oldVal]);
                        } catch (e) {
                            alert("自定义watch执行错误:" + e);
                        }
                    });
                }
            }
        },
        proceFormComputed(c) {
            for (let key in c) {
                let cfield = c[key];
                if (typeof cfield == "function") {
                    this.computeData[key] = computed(() => cfield.apply(this));
                } else if (typeof cfield.get == "function") {
                    this.computeData[key] = computed({
                        get: () => {
                            try {
                                return cfield.get.apply(this);
                            } catch (e) {
                                console.log("计算字段取值出错：" + key);
                            }
                        },
                        set: (newValue) => {
                            try {
                                cfield.set.apply(this, [newValue]);
                            } catch (e) {
                                console.log(
                                    "计算字段Set出错：" + key + "," + newValue
                                );
                            }
                        },
                    });
                }
            }
        },
        proceFormMethods(m) {
            for (let key in m) {
                let func = m[key];
                if (typeof func == "function") {
                    this[key] = func.bind(this);
                } else {
                    console.log("method定义错误：" + key);
                }
            }
        },
    },
};
</script>